<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://www.springframework.org/tags" prefix="spring"%>
<div id="fb-root"></div>
<script>
	(function(d, s, id) {
		var js, fjs = d.getElementsByTagName(s)[0];
		if (d.getElementById(id))
			return;
		js = d.createElement(s);
		js.id = id;
		js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.0";
		fjs.parentNode.insertBefore(js, fjs);
	}(document, 'script', 'facebook-jssdk'));

	$(function() {
		$("#product-image").elevateZoom();
	});
</script>


<div class="box m proView">
	<div class="btitle path">
		<a href="goHomePage.html"><spring:message
				code="top.header.homepage" /></a>&nbsp;»&nbsp; <a><c:out
				value='${currentProduct.name }' /></a>
	</div>
	<div class="bCt">
		<ul class="ul view">
			<li class="img"><a class="group1"> <img id="product-image"
					style="max-width: 240px; max-height: 200px;"
					src="<c:url value='loadImage.html?type=THUMB&fileId=${currentProduct.productImages[0]}'/>"
					border="0"
					data-zoom-image="<c:url value='loadImage.html?type=FULL&fileId=${currentProduct.productImages[0]}'/>">
			</a>
				<p>&nbsp;</p>
				<div class="img-list clearUl">
					<ul style="display: none;">

					</ul>
				</div>
				<div class="clear"></div>
				<div class="pr">${currentProduct.getUnitPriceAsSale()}</div>

				<div class="pro-special">
					<c:out value='${currentProduct.highlight}' />
				</div></li>
			<li class="buy_frm">
				<h1>
					<b><c:out value='${currentProduct.name }' /></b>
				</h1> <!-- AddThis Button BEGIN -->
				<div class="addthis_toolbox addthis_default_style ">
					<div class="fb-like"
						data-href="viewProduct.html?pId=${currentProduct.id}"
						data-layout="standard" data-action="like" data-show-faces="true"
						data-share="true"></div>

					<div class="atclear"></div>
				</div> <!-- AddThis Button END --> <br>
				<div class="price">${currentProduct.getUnitPriceAsSale()}</div>
				<div class="btn buy" style="float: left !important;">
					<a title="<spring:message code="cart.buy" />"
						href="javascript:addToCart(${currentProduct.id},'${currentProduct.name }',${currentProduct.productImages},${currentProduct.unitPrice});"><spring:message
							code="cart.buy" /></a>
				</div>
				<div class="clear"></div>
				<p>
					<i>${currentProduct.shortDescription}</i>
				</p>
				<div class="frm_t"
					style="float: left; font-size: 13px !important; color: #666666;">
					<spring:message code="product.advice" />
				</div>
				<div class="clear"></div>
				<p></p>
			</li>
		</ul>
		<div style="clear: both"></div>
	</div>
</div>

<div class="box m">
	<div class="btitle" style="color: #666">
		<spring:message code="product.info" />
	</div>
	<div class="bCt" id="products_content"
		style="text-align: justify; line-height: 20px">${currentProduct.description}</div>
	<div style="clear: both"></div>
</div>

<div class="box m">
	<div class="bCt productLs">
		<c:forEach items="${productList}" var="p">
			<div class="it">
				<a title="<c:out value='${p.name}'/>"
					href="viewProduct.html?pId=${p.id}&page=${param.page}"> <span
					class="t"><c:out value='${p.name}' /></span> <c:if
						test="${not empty p.productImages}">
						<img style="max-width: 120px; max-height: 100px;" alt="${p.name}"
							src="<c:url value="loadImage.html?type=THUMB&fileId=${p.productImages[0]}"/>"
							border="0">
					</c:if>
				</a>
				<div class="pr">${p.getUnitPriceAsSale()}</div>
				<p>
					<c:out value='${p.highlight}' />
				</p>
				<div class="btn buy">
					<a title="<spring:message code="cart.buy" />" href="javascript:addToCart(${p.id},'${p.name }',${p.productImages},${p.unitPrice});"><spring:message
							code="cart.buy" /></a>
				</div>
			</div>
		</c:forEach>

		<div class="clear"></div>
		<c:if test="${not empty productList }">
			<c:if test="${productList[0].totalPage > 1}">
				<div style="text-align: center;" class="pages">
					<div style="display: inline-block;">
						<spring:message code="page.pagination.title" />
						<c:forEach begin="1" end="${productList[0].totalPage}" step="1"
							var="page">
							<c:if test="${page == param.page }">
								<span class="current">${page}</span>&nbsp;|
							</c:if>

							<c:if test="${!(page == param.page)}">
								<span><a
									href="viewProduct.html?pId=${currentProduct.id}&page=${page}">${page}</a></span>&nbsp;|
							</c:if>
						</c:forEach>
					</div>
				</div>
			</c:if>
		</c:if>
	</div>
</div>
